import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { breadcrumbDividerDefaultProps } from './defaultProps';
import type { BreadcrumbDividerOptions } from './type';
import Icon, { IconOptions } from '../icon';

export interface BreadcrumbDividerProps
  extends BreadcrumbDividerOptions,
    Omit<IconOptions, 'name'>,
    Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

const BreadcrumbDivider: FC<BreadcrumbDividerProps> = (props) => {
  const { className, content, icon, children, forwardedRef, ...breadcrumbDividerProps } = props;

  if (icon) {
    return createElement(Icon, { forwardedRef, name: icon, className: 'divider', ...breadcrumbDividerProps });
  } else {
    return createElement(
      'div',
      { ref: forwardedRef, className: classNames('divider', className), ...breadcrumbDividerProps },
      children || content,
    );
  }
};

BreadcrumbDivider.displayName = 'BreadcrumbDivider';
BreadcrumbDivider.defaultProps = breadcrumbDividerDefaultProps;

export default BreadcrumbDivider;
